<template>
	<view class="form">
		<u--form labelPosition="top" :model="userInfo" :rules="rules" ref="userInfo">
			<view style="padding: 0 15px;" class="pri">
				<u-form-item label="借款金额" labelWidth="70" prop="cityId" required>
					<up-picker-data
						v-model="userInfo.cityId"
						title="请选择借款金额"
						:options="citys"
						valueKey="id"
						labelKey="name">
					</up-picker-data>
				</u-form-item>
			</view>
		
		<view style="padding: 0 15px;"  class="info">
				<u-form-item class="info-itm" label="姓名" labelWidth="60" prop="name" ref="item1" required>
					<u--input v-model="userInfo.name" placeholder="请输入姓名" clearable></u--input>
				</u-form-item>
				<u-form-item class="info-itm" label="身份证" labelWidth="60" prop="idcard" type="idcard" ref="item1" required>
					<u--input v-model="userInfo.idcard" placeholder="请输入身份证号" clearable maxlength="18"></u--input>
				</u-form-item>
				
				<u-form-item class="info-itm" label="城市" labelWidth="60" prop="cityId" required>
					<up-picker-data
						v-model="userInfo.cityId"
						title="请选择所在城市"
						:options="citys"
						valueKey="id"
						labelKey="name">
					</up-picker-data>
				</u-form-item>
			
		
		</view>
		
		<view style="padding: 0 15px;" class="zzi">
			<u-form-item label="借款金额" labelWidth="80" prop="cityId" required>
				<up-picker-data
					v-model="userInfo.jklxId"
					title="请选择借款金额"
					:options="jklx"
					valueKey="id"
					labelKey="name">
				</up-picker-data>
			</u-form-item>
			
			<u-form-item label="资质认证(多选)" labelWidth="120" required>
			<view class="button-container">
			  <view 
			    v-for="(item, index) in buttonList" 
			    :key="index"
			    class="button-wrapper"
			  >
			    <u-button
			      @click="toggleSelection(item.value)"
			      :type="isSelected(item.value) ? 'primary' : 'info'"
			      :custom-style="!isSelected(item.value) ? customStyle : ''"
			      size="medium"
			      class="custom-button"
			    >
			      {{ item.name }}
			    </u-button>
			  </view>
			</view>
			</u-form-item>
		</view>
		

		  
		<view class="btn-save">
			<u-button text="保存" type="primary" @click="submit"></u-button>
		</view>
		
		</u--form>
	</view>
 </template>
<script>
	export default {
		data() {
			return {
				userInfo: {
						name:'',
						idcard:'',
						jklxId: 0,
						cityId: 0
				},
				 selectedValues: [],
				 buttonList: [
				        { name: '选项1', value: '1' },
				        { name: '选项2', value: '2' },
				        { name: '选项3', value: '3' },
				        { name: '选项4', value: '4'}
				      ],
				jklx:[
						{
							id: '1',
							name: "支付宝"
						},
						{
							id: '2',
							name: "白条"
						},
						{
							id: '3',
							name: "花呗"
						}
					],
					
					
					citys:[
							{
								id: '1',
								name: 10000
							},
							{
								id: '2',
								name: 20000
							},
							{
								id: '3',
								name: 30000
							}
						],
				// 验证规则
				rules: {
					'name': [{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								return uni.$u.test.chinese(value);
							},
							message: '姓名只能输入汉字',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'idcard': [{
							required: true,
							message: '请输入身份证号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								return uni.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'city': {
						type: 'Number',
						required: true,
						message: '请选择所在城市',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onReady() {
			this.$refs.userInfo.setRules(this.rules)
		},
		
		onLoad() {
			//  获取 城市列表
			this.$request('admin/tye_ins',{},'GET',true).then((res=>{
				console.log('=== $request ===')
				console.log(res)
			}))
		},
		
		methods: {
			 toggleSelection(value) {
				  const index = this.selectedValues.indexOf(value);
				  if (index === -1) {
					this.selectedValues.push(value);
				  } else {
					this.selectedValues.splice(index, 1);
				  }
				},
				isSelected(value) {
				  return this.selectedValues.includes(value);
   			  },
			selectItem(item) {
				console.log(item)
			},
					
			submit() {
				console.log('------')
				uni.redirectTo({
					url:"/pages/loading/loading"
				})
				
				// this.$refs.userInfo.validate().then(res => {
				// 	this.$refs.uToastRef.show({
				// 		type: "success",
				// 		message: "提交成功",
				// 	})
				// }).catch(err => {
				// 	// uni.$u.toast('校验失败')
				// 	this.$refs.uToastRef.show({
				// 		type: "error",
				// 		message: "请检查填写内容",
				// 	})
				// })
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.form {
		background-color: white;
		height: 100vh;
		.btn-save {
			width: 300rpx;
			margin: 0 auto;
			margin-top: 100rpx;
		}
	}
	
	.pri{
		height:10vh;
		border: 1rpx solid rgba(128, 128, 128, 0.3);
		margin: 0 10rpx 40rpx 10rpx;
	}

	.info{
		height:28vh;
		border: 1rpx solid rgba(128, 128, 128, 0.3);
		margin: 0 10rpx 40rpx 10rpx;
		.info-itm{
			padding: 0 0 -12rpx 0;
		}
	}
	
	.zzi{
		height:32vh;
		border: 1rpx solid rgba(128, 128, 128, 0.3);
		margin: 0 10rpx 10rpx 10rpx;
	}
	
	.button-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		margin: -10rpx; /* 抵消子元素margin */
	
		.button-wrapper {
			width: 33.333%;
			padding: 10rpx;
			box-sizing: border-box;
	
			.custom-button {
			  width: 100%;
			  height: 80rpx;
			  font-size: 28rpx;
			  /* 取消uButton默认外边距 */
			  margin: 0 !important;
			}
		}	
	}
</style>